<template>
  <div style="margin-top: 50px">
    <el-form
      :model="value"
      ref="productInfoForm"
      label-width="160px"
      class="form-inner-container"
      size="small"
    >
      <el-form-item label="名称：" prop="productName">
        <el-input v-model="value.productName"></el-input>
      </el-form-item>
      <el-form-item label="职业类别文件：" prop="careerCategoryFileUrl">
        <upload
          v-model="value.careerCategoryFileUrl"
          accept=".pdf"
          list-type="text"
          value-type="item"
          :multiple="false"
        />
      </el-form-item>
      <el-form-item label="购买份数上限：" prop="purchaseLimitNum">
        <el-input-number
          v-model="value.purchaseLimitNum"
          :controls="false"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="犹豫期天数：" prop="freeLookPeriodDay">
        <el-input-number
          v-model="value.freeLookPeriodDay"
          :controls="false"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="产品图片：" prop="pictures">
        <upload
          v-model="value.pictures"
          accept="image/*"
          list-type="picture-card"
          value-type="url-array"
        >
        </upload>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input type="textarea" v-model="value.remark" />
      </el-form-item>
      <el-form-item label="sku信息：" prop="skuInfos">
        <el-row :gutter="12" type="flex">
          <el-col :span="12">
            <el-card
              style="flex: 1"
              header="选择"
              shadow="never"
              body-style="height:400px;overflow:auto"
            >
              <el-tree
                ref="treeRef"
                :data="skuList"
                :props="{ label: 'skuName' }"
                :expand-on-click-node="false"
                default-expand-all
                node-key="id"
                show-checkbox
                @check-change="handleTreeCheckChange"
              />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card
              style="flex: 1"
              header="排序"
              shadow="never"
              body-style="height:400px;overflow:auto"
            >
              <el-tree
                ref="metaTreeRef"
                :data="selectedSkuList"
                :props="{ label: 'skuName' }"
                :expand-on-click-node="false"
                default-expand-all
                node-key="id"
                draggable
                :allow-drop="handleAllowDrop"
              />
            </el-card>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item style="text-align: center">
        <el-button type="primary" size="medium" @click="handleSave"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SingleUpload from "@/components/Upload/singleUpload.vue";
import {
  dateUnits,
  paymentMethods,
  publishStatus,
  publishStatusEnum,
} from "@/utils/constant/pms";
import SelectScroll from "@/components/SelectScroll.vue";
import { fetchSkuList } from "@/api/product";
import { PAGE_SIZE_ALL } from "@/utils/constant/system";
import Upload from "@/components/Upload/index.vue";
import SingleFileUpload from "@/components/Upload/singleFileUpload.vue";

export default {
  name: "ProductInfoDetail",
  components: { SingleFileUpload, Upload, SelectScroll, SingleUpload },
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      publishOptions: publishStatus.toKeyValueArray(),
      dateUnitOptions: dateUnits.toKeyValueArray(),
      paymentOptions: paymentMethods.toKeyValueArray(),
      hasEditCreated: false,
      skuList: [],
      selectedSkuList: [],
    };
  },
  created() {
    this.getSkuList();
  },
  computed: {
    publishStatusEnum() {
      return publishStatusEnum;
    },
    //商品的编号
    productId() {
      return this.value.id;
    },
  },
  watch: {
    productId: function (newValue) {
      if (!this.isEdit) return;
      if (this.hasEditCreated) return;
      if (newValue === undefined || newValue == null || newValue === 0) return;
      this.handleEditCreated();
    },
    selectProductCateValue: function (newValue) {
      if (newValue != null && newValue.length === 2) {
        this.value.productCategoryId = newValue[1];
        this.value.productCategoryName = this.getCateNameById(
          this.value.productCategoryId,
        );
      } else {
        this.value.productCategoryId = null;
        this.value.productCategoryName = null;
      }
    },
  },
  methods: {
    handleAllowDrop(draggingNode, dropNode, type) {
      return type !== "inner";
    },
    handleTreeCheckChange() {
      console.log("fuck");
      this.selectedSkuList = this.$refs.treeRef.getCheckedNodes();
      console.log(this.selectedSkuList);
    },
    getSkuList() {
      fetchSkuList({
        pageNum: 1,
        pageSize: PAGE_SIZE_ALL,
      }).then((res) => {
        this.skuList = res.data.list;

        const skuInfoIds = (this.value.skuInfos || []).map(
          (item) => item.skuId,
        );
        this.$nextTick(() => {
          this.$refs.treeRef.setCheckedKeys(skuInfoIds);
        });
      });
    },
    //处理编辑逻辑
    handleEditCreated() {
      if (this.value.productCategoryId != null) {
        this.selectProductCateValue.push(this.value.cateParentId);
        this.selectProductCateValue.push(this.value.productCategoryId);
      }
      this.hasEditCreated = true;
    },
    handleSave() {
      this.$emit("finishCommit", this.isEdit, this.selectedSkuList);
    },
  },
};
</script>

<style scoped></style>
